import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Form, Button } from 'react-bootstrap';
import $ from 'jquery';

import { 
  PRODUCT_NAME,
  GITEE_URL
} from '../../config';
import { function_set_deploy_url } from '../../actions/deploy';

import InstallClient from '../../components/team/install';
import InstallNotice from '../../components/team/installNotice';

import './less/download.css';

class App extends Component {

  state = {
    ip: "",
    port: 9535,
  }

  handleSubmit () {
    let ip = $(this.refs.ip).val();
    if(ip === ""){
      alert("设置失败");
      return;
    }
    function_set_deploy_url(ip, this.state.port, this.props.dispatch, () => {
      alert("设置成功");
    });
  }

  render () {
    return (
      <div className="download-container">
        <h2 className="text-center"><em>{PRODUCT_NAME}需要在您团队的服务器上安装客户端插件</em></h2>
        <p>
          流刀上线工具是一款在微服务的场景下，帮助您的项目成员快速完成上线流程的一个工具。一个完整的上线流程通常包含如下阶段：
        </p>
        <ol>
          <li>
            提交上线申请
            <p>有么有觉得在gitlab提交上线单真的好麻烦的！！！一个版本上线需要通常涉及七八个微服务代码的修改。你不得不提交七八份上线单，万一有哪个上线单忘了提交。。。没错，这就是你的锅！</p>
            <p>也许你也猜到了，流刀上线工具只需要提交一份上线单，在上线单中你需要列出需要上线的微服务和该微服务需要上线的分支。具体各个微服务的分支合并到哪个分支就不需要你关心啦。项目管理员在添加微服务配置时已经指定好了。</p>
          </li>
          <li>
            部署到测试环境
            <p>程序员小哥哥或者测试小姐姐可以在界面上将提交的上线申请对应的那些分支一键部署到测试环境，<strong>自动创建表，修改表字段，添加定时任务，添加或者重启某个job等</strong>。当您修改了某些代码时也可以重新在测试环境中进行部署</p>
          </li>
          <li>
            测试通过
          </li>
          <li>
            代码review
            <p>上线人员需要review一下你的代码确定是否可以上线</p>
          </li>
          <li>
            部署到预发布环境
            <p>如果觉得有必要，项目管理员可以将代码部署到预发布环境，使用线上数据库进行测试</p>
          </li>
          <li>
            上线
          </li>
        </ol>
        <h4><em>注意事项：</em></h4>
        <ol>
          <li><p>不会在预发布环境添加定时任务也不会在预发布环境上线任何与job相关的内容</p></li>
        </ol>
        <h4><em>关于您团队项目相关的敏感信息</em></h4>
        <p>流刀上线工具为完成上线流程需要的隐私信息包括如下：</p>
        <ol>
          <li>
            测试环境/预发布环境/线上环境的服务器连接
            <p>该服务器连接需要的最低权限为对使用该连接的微服务在部署目录、git目录有读写权限</p>
          </li>
          <li>
            测试环境/线上环境的数据库连接（非必须）
            <p>最低权限为对使用该数据库连接的微服务，其使用的数据库有表结构相关的修改权限</p>
          </li>
        </ol>
        <p className="text-danger"><em>服务器连接信息和数据库连接信息保存在您自己内网的服务器上，我们不会也无法读取您的这些敏感信息。但我们需要您在您内网的服务器上安装我们的客户端工具，由它来辅助我们完成上线流程。</em></p>

        <InstallClient />
        <Form>
          <Form.Label className="text-success">填写 <strong>您团队成员</strong> 访问该服务器ip或域名，如做了端口转发，需要填写您给客户端工具开放的端口号。</Form.Label>
          <Form.Row>
            <Form.Control type="text" style={{ width: '400px' }} placeholder="注意不要填写http" ref="ip" />
            <Form.Control type="number" style={{ width: '80px' }} placeholder="端口" defaultValue={this.state.port} onChange={event => this.setState({ port: event.target.value })} ref="port" />
            <Button variant="light" onClick={this.handleSubmit.bind(this)}>
              点击测试
            </Button>
          </Form.Row>
        </Form>
        <InstallNotice />
        <p>项目gitee地址：<a
          href={GITEE_URL}
          target="_blank"
          rel="noopener noreferrer"
        >传送门</a>
        </p>
        <p>如果觉得好，不要吝啬给个star哦，如果有任何问题，可以提
          <a href={GITEE_URL + "/issues"} target="_blank" rel="noopener noreferrer">issues</a>，
          当然，也欢迎您提交<a href={GITEE_URL + "/pulls"} target="_blank" rel="noopener noreferrer">merge request</a></p>
      </div>
    )
  }
}

function mapStateToProps (state) {
  return {
  }
}

export default connect(mapStateToProps)(App);